<template>
  <div>
    <!-- 顶部卡片：报表类型切换和日期选择 -->
    <el-card>
      <div style="display: flex; align-items: center; gap: 16px;">
        <!-- 周报/月报切换按钮 -->
        <el-radio-group v-model="reportType" size="small">
          <el-radio-button label="week">周报</el-radio-button>
          <el-radio-button label="month">月报</el-radio-button>
        </el-radio-group>
        <!-- 日期范围选择器 -->
        <div class="date-picker">
          <el-date-picker v-model="dateRange" type="daterange" range-separator=" - " start-placeholder="开始日期"
            end-placeholder="结束日期" :disabled-date="disabledDate" @change="handleDateChange" />
        </div>
      </div>
      <!-- 柱状图区域 -->
      <div ref="chartRef" style="width: 100%; height: 350px; margin-top: 24px;"></div>
    </el-card>

    <!-- 房间护理统计记录表格 -->
    <el-card style="margin-top: 32px;">
      <div style="font-weight: bold; margin-bottom: 12px;">房间护理统计记录</div>
      <el-table :data="roomData" border>
        <el-table-column prop="room" label="病房" />
        <el-table-column prop="status" label="护理情况">
          <template #default="{ row }">
            <span :style="{ color: row.status === '异常' ? 'red' : 'inherit' }">{{ row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="护理数量" />
        <el-table-column prop="shouldCount" label="应护理数量" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

// 报表类型，week为周报，month为月报
const reportType = ref('week')
// 日期范围，默认一周（可根据需要修改为指定日期）
const dateRange = ref([
    new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000),
    new Date()
]);

// 柱状图DOM引用
const chartRef = ref(null)
// Echarts实例
let chartInstance = null

// 护士数据，包含姓名、总巡查任务数、实际打卡数
const nurseData = ref([
  { name: '胡素敏', total: 7, actual: 5 },
  { name: '李晓晓', total: 5, actual: 5 },
  { name: '刘菲敏', total: 7, actual: 7 },
  { name: '王璐', total: 4, actual: 3 },
  { name: '谢依夜', total: 2, actual: 1 },
  { name: '蒋媛', total: 6, actual: 5 },
  { name: '周丽芬', total: 5, actual: 5 },
  { name: '朱倩倩', total: 7, actual: 5 },
  { name: '唐妃', total: 5, actual: 4 }
])

// 房间护理统计数据
const roomData = ref([
  { room: '201病房', status: '异常', count: 12, shouldCount: 13 },
  { room: '202病房', status: '异常', count: 13, shouldCount: 13 }
])

// 渲染Echarts柱状图
const renderChart = () => {
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value)
  }
  const option = {
    tooltip: { trigger: 'axis' }, // 鼠标悬浮提示
    legend: { data: ['总巡查任务数（次）', '实际打卡数（次）'] }, // 图例
    xAxis: { type: 'category', data: nurseData.value.map(i => i.name) }, // x轴为护士姓名
    yAxis: { type: 'value' }, // y轴为数值
    series: [
      {
        name: '总巡查任务数（次）',
        type: 'bar',
        data: nurseData.value.map(i => i.total),
        itemStyle: { color: '#5470C6' },
        label: {
          show: true, // 显示柱子顶部的数值
          position: 'top'
        }
      },
      {
        name: '实际打卡数（次）',
        type: 'bar',
        data: nurseData.value.map(i => i.actual),
        itemStyle: { color: '#FAC858' },
        label: {
          show: true, // 显示柱子顶部的数值
          position: 'top'
        }
      }
    ]
  }
  chartInstance.setOption(option)
}

// 页面挂载后初始化图表
onMounted(() => {
  nextTick(renderChart)
})

// 监听报表类型和日期变化，动态刷新数据和图表
watch([reportType, dateRange], () => {
  // 这里可以根据 reportType 和 dateRange 请求后端数据并更新 nurseData 和 roomData
  renderChart()
})
</script>

<style scoped>
/* 可根据需要自定义样式 */
</style>
